<template>
    <div class="main">
        <Nav />
        <div class="right_route">
            <div class="top_content">
                <h3>敏感测管理</h3>
                <div class="item">
                    <div>
                        <el-input v-model="infor.employee_namer" placeholder="请输入敏感词名称" size="large" style="width: 300px" />
                    </div>
                    <div class="right_search">
                        <!-- <el-button type="primary" size="large" @click="find_data">查询</el-button> -->
                        <el-button type="primary" size="large" @click="add_data">添加</el-button>
                    </div>
                </div>
            </div>
            <div class="content">
                <el-tag v-for="(item, index) in list" :key="index" class="mx-1" closable type="info"
                    @close="close(item.id)">
                    {{ item.name }}
                </el-tag>
            </div>
        </div>
    </div>
</template>
  
<script setup lang="ts">
import { onMounted, ref, reactive } from 'vue'
import Nav from "@/components/public/nav.vue"
import { get_sensitive, delete_sensitive, add_sensitive } from "@/request/api/sensitive"
import { reload } from "@/utils/flushed"
const limit = ref(10)
let params_init = {
    limit: limit.value,
    page: 1
}
let list: any = ref([])

const infor = reactive({
    employee_namer: '',
})
const close = async (val: any) => {
    console.log(val, "evt");
    let data = await delete_sensitive({ id: val })
    if (data.code == 200) {
        ElMessage({
            message: '删除成功',
            type: 'success',
        })
        reload()
    }
}
const add_data = async () => {
    if (!infor.employee_namer) {
        ElMessage.error("请输入敏感词名称")
        return
    }
    let data: any = await add_sensitive({ name: infor.employee_namer })
    console.log(data, '增加');
    if (data.code == 200) {
        ElMessage({
            message: '增加成功',
            type: 'success',
        })
        reload()
    } else {
        ElMessage.error(data.message)
    }
}
const find_data = () => {

}
const get_list = async () => {
    let { data } = await get_sensitive(params_init)
    console.log(data, "敏感词");
    list.value = data.list
}
onMounted(() => {
    get_list()
})
</script>
  
<style lang="scss" scoped>
.main {
    display: flex;


    .right_route {
        padding: 10px 20px 0 20px;
        flex: 1;
        box-sizing: border-box;
        background: rgba(#FFF, 1);
        width: calc(100vw - 200px);

        .top_content {
            display: flex;
            padding: 20px 10px;
            width: 100%;
            box-sizing: border-box;
            justify-content: space-between;

            .item {
                display: flex;
                align-items: center;
                margin-right: 20px;

                span {
                    display: inline-block;
                    width: 70px;
                    @include font(rgba(0, 0, 0, 0.8470588235294118), 14, 22);
                }

                .right_search {
                    margin-left: 50px;
                }
            }

            h3 {
               margin: 10px 0 20px;
                   color: #1f2f3d;
                   font-weight: 400;
                   font-size: 22px;
            }
        }

        .content {
            display: flex;

            :deep(.el-tag) {
                margin-top: 20px;
                margin-right: 20px;
            }
        }


    }
}
:deep(.el-input){
  height: 32px;
}
:deep(.el-button){
  height: 32px;
}
</style>